<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS Menu</title>
<script type="text/javascript" src="../jQuery/jquery.js"></script>
<style>
#navigation {
  list-style: none;
}

#navigation li {
  float: left;
}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
  height: 70px;
	position: relative;
	display: block;
	background: url(../images/dragon-sprite.jpg) 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.home {
  background-position: 0 0;
  width: 102px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
  background-position: 0 -280px;
  width: 102px;
}

#navigation a.services {
  background-position: -102px -140px;
  width: 115px;
}

#navigation .highlight a.services:hover,
#navigation a.services .hover {
  background-position: -102px -280px;
}

#navigation a.portfolio {
  background-position: -217px 0;
  width: 120px;
}

#navigation .highlight a.portfolio:hover,
#navigation a.portfolio .hover {
  background-position: -218px -280px;
}

#navigation a.about {
  background-position: -337px 0;
  width: 100px;
}

#navigation .highlight a.about:hover,
#navigation a.about .hover {
  background-position: -339px -280px;
}

#navigation a.contact {
  background-position: -437px 0;
  width: 115px;
}

#navigation .highlight a.contact:hover,
#navigation a.contact .hover {
  background-position: -440px -280px;
}

</style>
</head>

<body>
<ul id="navigation">
	<li class="highlight"><a href="#" class="home"><span class="normal">Home</span></a></li>
	<li class="highlight"><a href="#" class="services"><span class="normal">Services</span></a></li>

	<li class="highlight"><a href="#" class="portfolio"><span class="normal">Portfolio</span></a></li>
	<li class="highlight"><a href="#" class="about"><span class="normal">About</span></a></li>
	<li class="highlight"><a href="#" class="contact"><span class="normal">Contact</span></a></li>

</ul>
<script>
$(function(){
	if($.browser.msie && $.browser.version < 7) return;
	$('#navigation').find('a').append("<span class='hover'/>").each(function(){
		var span = $('> span.hover',this).css({opacity:0});
		$(this).hover(function(){
			span.stop().fadeTo(500,1);
		},function(){
			span.stop().fadeTo(500,0);
		})
	});
});
</script>
</body>
</html>
